import { select_empty_staticNode } from './cla_select_empty_staticNode';

import { select_empty_eventBind } from './cla_select_empty_eventBind';
import { create_ListenEvent_mana } from '../../../Event/listenEvent_mana';
import {
  select_empty_view_default_tag,
  spacename_select_empty,
} from '../DataDefine/sourceData';
import {
  appearEl_child_func,
  disappearEl_child_func,
  normalizeContainer,
  packNode,
} from '../../../Func';
import {
  css_disnone,
  css_wind_light,
  css_wind_light_hover,
} from '../../../DataDefine/sourceData';
import { remove_class } from '../../../class_operate/Func';
import { global_delay_appear } from '../../../../DataDefine/sourceData';

const select_empty_dataManaTag = 'select_empty_dataMana';

class select_empty_dataMana extends select_empty_staticNode {
  get [Symbol.toStringTag]() {
    return select_empty_dataManaTag;
  }

  constructor(props) {
    super(props);
  }

  /**
   * 当前 选中的 信息集 保存  相关 keyVal id -- string
   */
  selected_items_id_cur = [];

  /**
   * 上次 选中的 信息集 保存  相关 keyVal id -- string
   */
  selected_items_id_last = [];

  /**
   * 事件 绑定 this
   */
  eventBind = new select_empty_eventBind();

  /**
   * 事件 监听管理
   */
  eventM = create_ListenEvent_mana(spacename_select_empty);

  /**
   * @func 自定义事件提交信息
   */

  /**
   * 装载信息
   * @param {string[]} arr
   */
  load_selected_items_cur(arr) {
    this.selected_items_cur = [...arr];
    this.selected_items_last = [...arr];
  }

  /**
   * @func view 视窗
   */

  /**
   * 将 当前 选中数据 clone 一份 相关 node 到 视窗展示
   */
  #display_view_operate() {
    let cur_keyVal_dom;
    if (this.selected_items_id_cur.length == 0) {
      this.select_empty_view_selected_dom.innerHTML =
        select_empty_view_default_tag;
      return;
    }

    this.select_empty_view_selected_dom.innerHTML = '';
    for (const keyVal_id of this.selected_items_id_cur) {
      cur_keyVal_dom = normalizeContainer(keyVal_id).cloneNode(true);
      remove_class(cur_keyVal_dom, css_wind_light_hover);
      remove_class(cur_keyVal_dom, css_wind_light, true);
      packNode(this.select_empty_view_selected_dom, cur_keyVal_dom);
    }
  }

  /**
   * @func 开启 浮动元素
   */

  /**
   * 将 内容元素 打包 到 浮动元素 中
   */
  pack_all_node_From_select_content_To_focusDisplay() {
    do {
      const child_node = this.select_empty_content_dom.firstElementChild;
      // 打包 元素 到 浮动元素
      packNode(this.focusDisplay_dom_container, child_node);
    } while (this.select_empty_content_dom.firstElementChild != null);
  }

  /**
   * 显示 focusDisplay_el 动画
   */
  #open_focusDisplay_operate() {
    // 将元素 打包到 浮动元素
    this.pack_all_node_From_select_content_To_focusDisplay();

    appearEl_child_func(this.focusDisplay_dom, 'both');

    remove_class(this.focusDisplay_dom, css_disnone, true);

    setTimeout(() => {
      remove_class(this.focusDisplay_dom, css_disnone);
    }, global_delay_appear);
  }

  /**
   * 开启 浮动元素 系列操作
   */
  open_focusDisplay_func() {
    // 显示 浮动元素
    this.focusDisplay_dom.showModal();

    this.#open_focusDisplay_operate();
  }

  /**
   * @func 关闭 浮动元素
   */

  /**
   * 将 浮动元素 打包 到 内容元素 元素中
   */
  pack_all_node_From_focusDisplay_To_select_content() {
    do {
      const child_node = this.focusDisplay_dom_container.firstElementChild;
      // 打包 元素 到 浮动元素
      packNode(this.select_empty_content_dom, child_node);
    } while (this.focusDisplay_dom_container.firstElementChild != null);
  }

  /**
   * 取消 当前 浮动元素 操作
   */
  #cancel_focusDisplay_operate() {
    disappearEl_child_func(this.focusDisplay_dom, 'both', () => {
      this.pack_all_node_From_focusDisplay_To_select_content();
      this.focusDisplay_dom.close();
    });
  }

  /**
   * 关闭 浮动元素 系列操作
   */
  cancel_focusDisplay_func() {
    this.#cancel_focusDisplay_operate();
  }

  /**
   * @func 确认 浮动元素 操作 信息
   */

  /**
   * 确认 浮动元素 操作 信息
   */
  certain_focusDisplay_func() {
    this.#display_view_operate();
    this.#cancel_focusDisplay_operate();
  }
}

export { select_empty_dataMana };
